<template>
	<div class="page pageFixed">
		<div class="zoom">
			<div class="light"></div>
			<div class="prize">
				<div class="prize_text flex col a-center j-center">
					<h4>120</h4>
					<p>获得积分</p>
				</div>
			</div>
			
			<div class="button prize_button" @click="next()">领取({{count}}S)</div>
		</div>
	</div>
</template>
<script>
export default {
	data(){
		return {
			time:null,
			count:30
		}
	},
	methods:{
		next(){
			clearInterval(this.time);
			this.$emit('next')
		}
	},
	mounted() {
		this.time = setInterval(()=>{
			if(this.count){
				this.count = this.count - 1
			}else{
				this.next()
			}
		},1000)
	}
}
</script>
<style scoped>
	.light{width:7.34rem; height: 7.34rem; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background: url('../../assets/img/light.png') no-repeat; background-size: 100% 100%; animation: rotate infinite 10s linear; -webkit-animation: rotate infinite 10s linear;}
	.prize{width: 6.97rem; height: 6.31rem; background: url('../../assets/img/prize1.png') no-repeat; background-size: 100% 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-58%);}
	.prize_button{position: absolute; left: 50%; bottom: 2%; transform: translateX(-50%);}
	.prize_text{width: 2.82rem; height: 2.82rem; margin: auto; margin-top: 1.5rem;  text-align: center; font-size: .36rem; color: #353535;}
	.prize_text h4{font-size: 1.1rem; margin-bottom: .2rem;}
</style>